<script lang="ts" setup name="AsmePersonCertification">
import {
  getListByConditionsWithPage,
  ndeMethodLevelConvertor,
  ndeMethodNameConvertor,
  urls
} from '@/index';
import type {
  AsmePersonCertification,
  AsmePersonCertificationQueryCondition,
  DialogModel
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
const title = '美标人员证书';
const queryCondition = reactive<AsmePersonCertificationQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  delete queryCondition.username;
  delete queryCondition.method;
  delete queryCondition.level;
  delete queryCondition.domain;
};

const getAsmePersonListWithPagePromise = () => {
  return getListByConditionsWithPage<AsmePersonCertification>(
    urls.asmePersonCertification,
    queryCondition
  );
};

const {
  data: getAsmePersonCerticationListData,
  run: getAsmePersonCerticationListRun,
  loading: getAsmePersonCerticationListLoading
} = useRequest(getAsmePersonListWithPagePromise);

const handleResetQuery = () => {
  resetQueryCondition();
  getAsmePersonCerticationListRun();
};

const detailDialogModel = reactive<DialogModel<AsmePersonCertification>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getAsmePersonCerticationListRun();
      detailDialogModel.change = false;
    }
  }
);
</script>
<template>
  <HqContainerTable
    :base-url="urls.asmePersonCertification"
    :title="title"
    :loading="getAsmePersonCerticationListLoading"
    :total="getAsmePersonCerticationListData?.total"
    :table-data="getAsmePersonCerticationListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getAsmePersonCerticationListRun"
    @handle-reset-query="handleResetQuery"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
    logic-delete
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.username"
          filterable
          clearable
          placeholder="请选择人员"
          @change="getAsmePersonCerticationListRun"
        >
          <HqAsmeUserOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.method"
          clearable
          placeholder="请选择方法"
          @change="getAsmePersonCerticationListRun"
        >
          <HqNdeMethodOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.level"
          clearable
          placeholder="请选择等级"
          @change="getAsmePersonCerticationListRun"
        >
          <HqNdeMethodLevelOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.domain"
          clearable
          placeholder="请选择行业"
          @change="getAsmePersonCerticationListRun"
        >
          <el-option value="U" label="U" />
          <el-option value="N" label="N" />
        </el-select>
      </hq-col>
    </template>
    <template #button> </template>
    <template #tableColumns>
      <hq-table-column prop="name" label="姓名" />
      <hq-table-column prop="certificationReference" label="certificationReference" />
      <hq-table-column prop="domain" label="domain" />
      <el-table-column
        prop="method"
        label="method"
        :formatter="ndeMethodNameConvertor"
        align="center"
        :min-width="200"
      />
      <el-table-column
        prop="level"
        label="level"
        :formatter="ndeMethodLevelConvertor"
        align="center"
        :min-width="200"
      />
      <hq-table-column prop="startDate" label="startDate" />
      <hq-table-column prop="endDate" label="endDate" />
      <hq-table-column label="附件">
        <template #default="{ row }">
          <el-link :href="row.attachmentUrl" v-if="row.attachmentUrl" target="_blank">查看</el-link>
        </template>
      </hq-table-column>
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped></style>
